<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=0" />
{% if location == 'default' %}
    <title>Gate One - {{hostname}}</title>
{% else %}
    <title>Gate One - {{location}}</title>
{% end %}
    <link rel="stylesheet" href="{{url_prefix}}static/gateone.css" type="text/css" media="screen" />
    <link rel="shortcut icon" href="{{url_prefix}}static/favicon.ico" />
    {% raw head %}
</head>
<body>
{% raw body %}
<script type="text/javascript" src="{{gateone_js}}"></script>
<div id="gateone"></div>
<script>
window.onload = function() {
    // Initialize Gate One using defaults:
    GateOne.location = '{{location}}';
{% if prefs %}
    var urlPrefs = {% raw prefs %};
    for (var pref in urlPrefs) {
        GateOne.prefs[pref] = urlPrefs[pref];
    }
    // Also remove the long obtrusive query string from the URL
    GateOne.Utils.removeQueryVariable('prefs');
{% end %}
    GateOne.init({% raw js_init %}); // NOTE: Many defaults (e.g. CSS themes/colors, font size, etc) can be overridden by the user.

    // Commented out below are a few examples of the various ways you can initialize Gate One...
    // Init Gate One (client) using the built-in white CSS scheme telling it to connect to a specific Gate One server (url):
//     GateOne.init({url: 'https://shell.mycompany.com/', 'theme': 'white'});
    // TIP: Did you know that the Gate One server doesn't have to be on the same domain as the page that loads gateone.js?  WebSockets don't have the same cross-domain restrictions that other DOM elements do.

    // Here's an example that limits the size of the #gateone element to demonstrate
    // how it can be embedded into another app/page...
//     GateOne.init({fillContainer: false, style: {'width': '50em', 'height': '32em'}, 'theme': 'white'});

    // Gate One uses relative sizes for all fonts and icons (e.g. 1em or 100%).  If you embed Gate One into your app and the fonts/icons seem too small you can adjust this by passing the fontSize parameter in the init() function:
    //     GateOne.init({fontSize: '130%'});
    // NOTE: Fonts *and* icons will be scaled according to the fontSize property.
}
</script>
</body>
</html>
